<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>循环变量(repeat variable difference)</title>
    <!-- 
      循环变量的定义
      - 循环变量：用于控制循环的迭代次数，通常在循环的初始化部分定义，并在每次迭代中更新。

      1.  `for`  循环
        for (let i = 0; i < 10; i++) {
            console.log(i);
        }
        -  `let i = 0` ：初始化循环变量  `i` 。
        -  `i < 10` ：循环条件， `i`  小于 10 时继续执行。
        -  `i++` ：每次循环结束后， `i`  自增 1。

      2.  `while`  循环
        let i = 0;
        while (i < 10) {
            console.log(i);
            i++;
        }
      - 循环变量  `i`  在循环外部定义，并在循环体内更新。

      3.  `do...while`  循环
        - 循环体至少执行一次，循环变量的更新与条件判断分开。

      3. 作用域
      - 块级作用域：使用  `let`  或  `const`  声明的循环变量在循环体内有效，超出循环体后不可访问。
      - 函数作用域：使用  `var`  声明的循环变量在整个函数内有效，可能导致意外的行为。

      4. 变量提升
        - 提升：使用  `var`  声明的变量会被提升到函数或全局作用域的顶部，但赋值不会提升。
        console.log(i); // undefined
          for (var i = 0; i < 5; i++) {
              console.log(i);
          }
        - 解决：使用  `let`  或  `const`  声明循环变量，避免变量提升带来的问题。

      5. 总结
      - 定义：循环变量用于控制循环的执行次数。
      - 作用域：使用  `let`  和  `const`  可以限制变量的作用域，避免意外覆盖。
      - 提升：了解变量提升的概念可以帮助避免潜在的错误。
   -->
  </head>
  <body>
    <h2>1.variable Hoisting</h2>
    <button id="btn1">循环按钮打印</button>

    <h2>2.获取按钮对应this监听</h2>
    <div class="btn-container">
      <button class="item-btn">按钮1</button>
      <button class="item-btn">按钮2</button>
      <button class="item-btn">按钮3</button>
      <button class="item-btn">按钮4</button>
    </div>

    <script>
      // 1.variable Hoisting
      {
        var btnEl = document.querySelector("#btn1");
        var message = "Hello World";

        for (var i = 0; i < 6; i++) {
          console.log("----------------------");
          var name = "variable" + i;

          btnEl.addEventListener("click", () => {
            console.log("clickbtn" + i);
            console.log(message, "----------");
            console.log(name);
          });
        }
        message = "var 变量提升了";
        console.log(i); // 6
        console.log(name);
      }
      console.log("====================================");

      // 2.获取按钮对应this监听
      {
        var btns = document.querySelectorAll(".item-btn");
        // 2.1.for对每一个按钮的点击进行监听
        for (var i = 0; i < btns.length; i++) {
          var btnItemEl = btns[i];
          btnItemEl.index = i;

          btnItemEl.onclick = function () {
            console.log(i);
            console.log(btnItemEl);

            // 怎么样在这里能拿到对应的btnItemEl
            // 方案一: 直接获取this
            console.log(this);

            // 方案二: 先获取索引
            console.log(this.index);
          };
        }
        console.log(i); // 4
        console.log(btnItemEl);

        // 2.2.forEach对每一个按钮的点击进行监听
        // btns.forEach((btn, index) => {
        //   btn.addEventListener("click", function () {
        //     // 方案一: 直接获取this
        //     console.log(this, "----------")
        //     // 方案二: 先获取索引
        //     console.log(index, "----------")
        //   });
        // });
      }
    </script>
  </body>
</html>
